<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>table综合案例</title>
    <link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
</head>
<body>
<div id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</div>
<table class="layui-hide" id="userTable" lay-filter="userTable" style="margin-top: 20px;"></table>
<!-- 数据表格结束 -->
<!-- 添加和修改的弹出层代码-->
<script src="${path}/static/layui/layui.js"></script>
<script>
    layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
        var $=layui.jquery;
        var table = layui.table;
        var form=layui.form;
        var layer=layui.layer;
        var laydate = layui.laydate;

        //绑定时间选择器
        laydate.render({
            elem : '#startTime'
        })
        laydate.render({
            elem : '#endTime'
        })

        //数据表格
        var tableID=table.render({
            elem : '#userTable' //渲染的目标对象
            ,
            url :'http://localhost:8080/log' //数据接口
            ,
            response: {
                statusName: 'code',
                statusCode: 200,
                msgName: 'message',
                countName: 'count',
                dataName: 'data'
            },
            title : '数据表格' //数据表格的标题
            ,
            page : true //开启分页
            ,
            cols : [ [
                //表头
                 {
                    field : 'id',
                    title : 'ID',
                    sort : true,
                    align: 'center'

                } //sort 是否排序布尔值
                , {
                    field : 'username',
                    title : '用户名',
                    align: 'center'
                }, {
                    field : 'loginIp',
                    title : '用户IP',
                    sort : true,
                    align: 'center'
                },
                {
                    field : 'loginTime',
                    title : '登录时间',
                    align: 'center'
                },

                {
                    fixed : 'right',
                    title : '操作',
                    toolbar : '#userBar',
                    width : 200,
                    align : 'center'
                } ] ]
        });
        //工具条事件
        table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function(index) {
                    form.val('dateFrm',data);
                    console.log("删除"+data.id);
                    $.ajax({
                        type: 'post',
                        url: '${pageContext.request.contextPath}/deleteLog',//调用删除接口，将选中行的id传给后端
                        dataType:'text',
                        data:{"id":data.id},
                        success: function (data) {
                            if (data==1){
                                layer.msg("删除成功", {icon: 6});
                                table.reload('userTable');
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        })
    });
</script>
</body>
</html>
